<template>
<view>
<canvas canvas-id="shareCanvas" class="share--card" style="width:560px;height:880px"></canvas>
<!-- <image src="{{shareImgUrl}}" style="height:600px" /> -->
<view class="absolute backgournd" :hidden="cardFlag" catchtouchmove="preventTouchMove">
  <view class="absolute backgournd" catchtouchmove="preventTouchMove">
    <canvas canvas-id="cardCanvas" class="share--canvas" style="width:560px;height:880px"></canvas>
  </view>
</view>
<view style="width:100%;height:400px" :hidden="cardFlag" catchtouchmove="preventTouchMove" class="absolute center--middle">
  <view class="absolute" v-if="showAll">
    <view class="icon--end">
      <view class="icon--end__content" style="right: 15rpx">
        <m-icon name="icontijiaodingdan-youhuiquan-guanbi" size="20px" color="#D1D1D1" @tap="hiddenCrad"></m-icon>
      </view>
    </view>
    <image style="width:560rpx;height:880rpx" @tap.stop="cardClick" :src="cardImgUrl"></image>
    <view class=" downButton" @tap.stop="savePhoto" style="margin-top:40rpx;margin-left:20px">
      <view class="downButton--content">
        <!-- <m-icon name="iconxiazai" size="20px" color="white"></m-icon> -->
        <view style="font-size:15px">保存至本地</view>
      </view>
    </view>
  </view>
</view>
<swiper :indicator-dots="indicatorDots" autoplay="true" :interval="3000" :duration="300" circular="true" class="swiper" current="0" @change="onSlideChange">
  <block v-for="(item, index) in goodDetail.imgUrls" :key="index">
    <swiper-item>
      <image :src="item" class="swiper--item"></image>
    </swiper-item>
  </block>
</swiper>
<view class="currentStyle">
  <view class="currentStyle__content">
    <view class="currentStyle__content--curr">{{current}} / {{goodDetail.imgUrls.length}}</view>
  </view>
</view>
<block>
    <view class="integral" style="margin-top: -50px;z-index: 30;position: absolute;">
  <view class="hasBack__price">
    <view class="hasBack__price--actPrice">
      {{goodDetail.integralPrice}}
      <view style="font-size:34rpx;margin-bottom:2px;font-weight:normal;margin-left:5px">积分</view>
    </view>
    <view class="through" style="color:white" v-if="goodDetail.guidePrice">
      市场价{{goodDetail.guidePrice}}
    </view>
  </view>
</view></block>
<!-- <view class="priceStyle">
    <view class="priceStyle__act">
        <view class="priceStyle__act--price">
            <view style="color:white">
                <text style="font-size:34rpx">积分</text>
                <text style="font-size:60rpx">{{goodDetail.integralPrice}}</text>
                <text class="through">￥{{goodDetail.guidePrice}}</text>
            </view>
        </view>
    </view>
</view> -->
<view class="product">
  <view class="product__title">
    <view class="product__title--name">{{goodDetail.integralGoodName}}</view>
  </view>
  <view @click="showShare" class="product__shareFloat" v-if="true">
    <view style="width:25px;display:flex;flex-wrap:wrap;justify-content:center;align-content: center;">
      <view class="iconfont iconshangpinxiangqing-fenxiang share__floatIcon"></view>
      <view style="font-size:10px">分享</view>
    </view>
  </view>
  <view class="product__description">
    <text class="product__description--title">销量</text>
    <view class="product__description--desc ">
      已售
      <text class="product__description--content">{{goodDetail.sales}}</text>
      件,
    </view>
    <view class="product__description--desc">
      仅剩
      <text class="product__description--content">{{goodDetail.inventory}}</text>
      件
    </view>
  </view>
</view>
<view class="cell">
  <view class="cell__line " @tap="getPop" data-mode="para">
    <text class="cell__title">产品参数</text>
    <view class="cell__title--right">
      <view style="margin-right:20rpx">查看产品参数</view>
      <u-icon name="arrow-right" style="font-size:16px;font-weight:bold"></u-icon>
    </view>
  </view>
  <u-popup :show="show" mode="bottom" :overlay="true" @close="onClose" :customStyle="{height:'50%'}" round="20">
    <view class="popup__attr" style="padding-bottom:50px;">
      <view class="cell__pop--reduce--text">商品参数</view>
      <view v-for="(item, index) in goodDetail.interalGoodsAttibutes" :key="index" :style="'padding-top:' + (index===0 ? '50px' : '')">
        <view class="popup__attr--item">
          <view class="popup__attr--item--left">{{item.name}}</view>
          <view class="popup__attr--item--right">{{item.value}}</view>
        </view>
      </view>
      <view class="center--middle" @tap="onClose">
        <view class="popup__attr--finish">完成</view>
      </view>
    </view>
  </u-popup>
</view>
<view class="shop--content">— 商品详情 —</view>
<view class="shop--english">COMMODITY DETAILS</view>
<!-- 商品详情富文本 -->
<view class="goods__text" @tap="pageLink" data-link="/pages/index/modules/me/systemBanner/systemBanner">
  <rich-text :nodes="goodDetail.detail+''"></rich-text>
  <image class="miniBottomLog" v-if="!!shopInfo.miniBottomLog" :src="!!shopInfo.miniBottomLog ? shopInfo.miniBottomLog : ''"></image>
  <sign :text="'smart shop商城系统 v' + APP_VERSION"></sign>
</view>
<!-- 底部按钮标签 -->
<view class="detail__bottom">
  <view class="detail__img" @tap="returnHome">
    <m-icon name="iconshouye" size="26px"></m-icon>
    <text class="detail__img--icon">店铺</text>
  </view>
  <button open-type="contact" class="detail__img">
    <m-icon name="iconxinbaniconshangchuan-" size="22px"></m-icon>
    <text class="detail__img--icon">客服</text>
  </button>
  <view class="noBuy__btn" v-if="goodDetail.status==0">商品已下架</view>
  <view class="noBuy__btn" v-if="goodDetail.inventory==0 && goodDetail.status==1">商品已售罄</view>
  <view class="buy__btn" @tap="gotoSubmit" v-if="goodDetail.inventory!=0 && goodDetail.status==1">
    立即兑换
  </view>
</view>
<u-popup :show="shareVisible" mode="bottom" @close="onClose" closeable>
  <view class="share">分享</view>
  <view class="shareWay">
    <view class="shareWay__side">
      <button open-type="share" @tap="onClose" style="border-radius:50px;display:flex;justify-content;align-items:center">
        <image src="http://medusa-small-file.oss-cn-hangzhou.aliyuncs.com/api/WeChat.png"></image>
      </button>
      <view class="shareWay__side--text">微信好友</view>
    </view>
    <view class="shareWay__side" @tap="shareBrCard">
      <image src="http://medusa-small-file.oss-cn-hangzhou.aliyuncs.com/api/poster.png"></image>
      <view class="shareWay__side--text">生成海报</view>
    </view>
  </view>
  <view class="shareTip">
    <view class="shareTip__tip">好物推荐，和好友一起分享你发现的好物</view>
  </view>
</u-popup>
</view>
</template>
<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator'
import {
  getIntegralGoodsDetail,
  shareGetIntegral,
  getIntegralRule,
} from "@/api/modules/integral";
import { getImgCode } from "@/api/modules/goods";
import { base64src } from "@/utils/base64src";
import page from "./canvas"
import sign from "@/components/sign/sign.vue"
import mIcon from "@/components/m-icon/m-icon.vue"
// const Page=require("./canvas.ts")
@Component({
    components: {
        sign,
        mIcon
    }
})
export default class IntegralGoods extends Vue {
    goodDetail:any={}
    show:boolean=false
    paraShow:boolean=false // 参数弹窗查看
    shareVisible:boolean=false // 生成卡片分享
    cardFlag:boolean=true
    imgUrl:string=""
    shareImgUrl:string=""
    cardImgUrl:string =""
    /** 轮播图路径 */
    current:number=1
    /** 版本号 */
    APP_VERSION=process.env.VUE_APP_APP_SHOW_VERSION
    /** 店铺信息 */
    shopInfo:any={}

    showAll: boolean = false
      /**
   * 主图视频
   */
  onSlideChange(e) {
    this.setData({
      current: e.detail.current + 1,
    });
  }
    /**
   * 查看优惠券
   */
  getPop({
    currentTarget: {
      dataset: { mode },
    },
  }) {
    this.setData({ show: true });
    switch (mode) {
      case "para":
        this.setData({ paraShow: true });
        break;
      default:
        break;
    }
  }

  /**
   * 绘制系统分享图片
   */
  canv(img) {
    return new Promise(resolve => {
      let priceHeight = 415;
      const lineHeight = 407;
      let newWidth = 100;
      uni.getSystemInfo({
        success(res) {
          if (res.model.indexOf("iPhone X") > -1) {
            priceHeight = 415;
            newWidth = 140;
          }
          if (res.model.indexOf("HMA-AL00") > -1) {
            priceHeight = 415;
          }
        },
      });
      const canvas = uni.createCanvasContext("shareCanvas", "componentInstance");
      canvas.drawImage(img, 0, 0, 560, 500);
      canvas.save();
      canvas.rect(0, 365, 560, 90);
      canvas.setFillStyle("#FF0C19");
      canvas.fill();
      canvas.beginPath();
      canvas.setFontSize(28);
      canvas.setFillStyle("white");
      canvas.fillText(
        `积分${this.goodDetail.integralPrice}`,
        20,
        priceHeight,
        400,
      );
      const leftWidth = canvas.measureText(
        this.goodDetail.integralPrice,
      ) as any;
      canvas.setFontSize(24);
      if (this.goodDetail.guidePrice) {
        canvas.fillText(
          `￥${this.goodDetail.guidePrice}`,
          newWidth + leftWidth.width,
          priceHeight,
          400,
        );
        const delPriceWidth = canvas.measureText(
          this.goodDetail.guidePrice,
        ) as any;
        canvas.moveTo(100 + leftWidth.width, lineHeight);
        canvas.lineTo(
          100 + leftWidth.width + delPriceWidth.width + 25,
          lineHeight,
        );
        canvas.setStrokeStyle("white");
        canvas.stroke();
      }
      canvas.draw(true, () => {
        uni.canvasToTempFilePath({
          x: 0,
          y: 0,
          canvasId: "shareCanvas",
          success: res => {
            img = res.tempFilePath;
            this.imgUrl = img;
            resolve(img);
          },
        });
      });
    });
  }
    /**
   * 展开分享方式
   */
  showShare() {
    this.setData({
      shareVisible: true,
    });
  }

  /**
   * 关闭卡片
   */
  hiddenCrad() {
    this.setData({
      cardFlag: true,
      showAll:false,
    });
  }
    /**
   * 保存卡片分享
   */
  shareBrCard() {
    const url = page;
    this.showLoad();
    let codeImg = "";
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 200,
    });
    this.setData({
      cardFlag: false,
      shareVisible: false,
    });
    const wxaGetwxacode = {
      path: `pages/detail/detail?id=${this.goodDetail.id}`,
      width: 0,
    };
    getImgCode(wxaGetwxacode).then(res => {
      codeImg = res;
      base64src(codeImg, res => {
        codeImg = res;
        uni.downloadFile({
          url: this.goodDetail.pic,
          success: v => {
            url.methods
              .canvCard(this.goodDetail, 1, v.tempFilePath, codeImg)
              .then(response => {
                this.setData({
                  cardImgUrl: response,
                  showAll: true,
                });
                this.showLoad();
              });
          },
        });
      });
    });
  }

  showLoad() {
    if (!this.cardImgUrl) {
      uni.showLoading({
        title: "图片生成中",
      });
    } else {
      uni.hideLoading();
    }
  }
    /**
   * 查看大图
   */
  cardClick() {
    uni.canvasToTempFilePath({
      canvasId: "cardCanvas",
      success: res => {
        this.setData({
          cardFlag: true,
        });
        const tempFilePath = res.tempFilePath;
        uni.previewImage({
          current: tempFilePath, // 当前显示图片的http链接
          urls: [tempFilePath], // 需要预览的图片http链接列表
        });
      },
    });
  }
    savePhoto() {
    uni.getSetting({
      success: res => {
        if (res.authSetting["scope.writePhotosAlbum"] === false) {
          uni.showModal({
            title: "",
            content: "请在设置中开启保存相册功能后再次保存图片",
            success() {
              uni.openSetting({});
            },
          });
        } else {
          uni.saveImageToPhotosAlbum({
            filePath: this.cardImgUrl,
            success() {
              uni.showToast({
                title: "保存成功",
                icon: "none",
              });
            },
          });
        }
      },
    });
  }
    /**
   * 禁止阴影移动
   */
  preventTouchMove() {
    return;
  }

  /**
   * 关闭pop
   * @param options
   */
  onClose() {
    this.setData({
      show: false,
      paraShow: false,
      shareVisible: false,
    });
  }

  /**
   * 前往确认订单页面
   * @param options
   */
  gotoSubmit() {
    const temObj = this.goodDetail;
    delete temObj.interalGoodsAttibutes;
    delete temObj.detail;
    const goodDetail = JSON.stringify(temObj);
    uni.navigateTo({
      url:
        "/modules/pages/submit/integralSubmit/integralSubmit?goodDetail=" +
        goodDetail,
    });
  }

  onLoad(options) {
    this.getGood(options.id);
    this.$Pubsub.on("app-launch", () => {
      this.getGood(options.id);
    });
  }
  onShow() {
    uni.hideHomeButton()
    const pages = getCurrentPages();// eslint-disable-line
    const currPage:any = pages[pages.length - 1];
    this.setData({
      shopInfo: this.$store.state.shopset.shopInfo,
    });
    if (currPage.$vm.id) {
      this.getGood(currPage.$vm.id);
    }
  }

  async getGood(id) {
    const res = await getIntegralGoodsDetail(id, {});
    let goodDetail = this.goodDetail;
    goodDetail = res;
    goodDetail.imgUrls = res.albumPics.split(",");
    goodDetail.guidePrice = goodDetail.guidePrice
      ? goodDetail.guidePrice.toFixed(2)
      : null;
    goodDetail.sale = goodDetail.sales;
    uni.getImageInfo({
      src: goodDetail.pic,
      success: res => {
        this.canv(res.path).then(res => {
          this.setData({
            shareImgUrl: res,
          });
        });
      },
    });
    this.setData({
      goodDetail,
    });
  }

  onShareAppMessage() {
    getIntegralRule({}).then(res => {
      if (res[0].open) {
        shareGetIntegral({}).then(res => {
          if (res) {
            uni.showToast({
              icon:"none",
              title: `分享成功，获得${res}积分`,
              duration:2000
            })
          }
        });
      }
    });
    return {
      imageUrl: this.imgUrl,
      title: this.goodDetail.integralGoodName,
      path: `/subcontract/pages/detail/integralGoods?id=${this.goodDetail.id}&type=1`,
    };
  }

  // 页面跳转路径
  pageLink(e) {
    const url = e.currentTarget.dataset.link;
    uni.navigateTo({
      url:`/subcontract${url}`,
    });
  }

  returnHome() {
    this.$store.dispatch("settingStore/backHome");
  }
}
</script>
<style lang="scss" scoped>
@import "@/assets/styles/detail/detail.scss";

page {
    background-color: #F5F5F5
}

.swiper {
    height: 750rpx;
    position: relative;
}

.swiper--item {
    width: 750rpx;
    height: 750rpx;
}

.priceStyle {
    margin-top: 40rpx;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    margin-left: 20rpx;
    margin-right: 20rpx;
    position: relative;
    top: -90rpx;
    background-color: #b61e1e;
    height: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    &__act {
        margin-top: 10rpx;
        margin-left: 30rpx;
        margin-right: 30rpx;
        flex-grow: 1;

        &--price {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }
    }
}

.through {
    margin-left: 20rpx;
    font-size: 30rpx;
    text-decoration: line-through;
}

.product {
    padding: 30rpx;
    background-color: white;
    position: relative;
}

.product__share {
    position: absolute;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 40px;
    right: 20px;
    top: 40px;
}


.product__box {
    overflow: hidden;
    background: #fff;
    white-space: nowrap;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
}

.product__box--list {
    width: 160rpx;
    height: auto;
    margin-right: 23rpx;
    display: inline-block;

    .item__book--text {
        width: 160rpx;
        height: 50rpx;
        border-radius: 50rpx;
        border: 1rpx solid #81817F;
        font-size: 26rpx;
    }
}

.product__norms {
    width: 180rpx;
    height: 60rpx;
    background-color: red;
    border-radius: 50rpx;
}


.product__title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    &--name {
        // font-size: 30rpx;
        // font-family: HiraginoSansGB-W6;
        // line-height: 52rpx;
        // font-weight: bold;
        // color: #1e1c1c;
        // width: 260px;
        font-size: 16px;
        font-family: HiraginoSansGB-W6;
        line-height: 52rpx;
        color: #1e1c1c;
    }
}


.product__description {
    margin-top: 13rpx;
    font-size: 26rpx;
    font-family: HiraginoSansGB-W6;
    line-height: 52rpx;
    color: #7c7c7c;
    display: flex;
    align-items: center;

    &--title {
        color: #1e1c1c;
        font-weight: bold;
    }

    &--desc {
        font-weight: normal;
        margin-left: 30rpx;
        font-size: 24rpx;
    }

    &--content {
        margin-left: 10rpx;
        margin-right: 10rpx;
        font-weight: bold;
        color: #fa5555;
    }
}

.icon--end {
    display: flex;
    justify-content: flex-end;
}

.icon--end__content {
    width: 5px;
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    position: relative;
    right: -5px;
}


.icon--end__content__circle {
    width: 5px;
    height: 5px;
    border-radius: 50px;
    background-color: white;
    margin: 2px 0px;
}


.cell {
    margin-bottom: 20rpx;
    background-color: white;
}

.cell__line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
}

.cell__title {
    font-size: 24rpx;
    font-weight: bold;
    width: 65px;
}

.cell__title--right {
    font-size: 24rpx;
    color: #989898;
}


.cell__title--right {
    font-size: 24rpx;
    color: #989898;
    display: flex;
    align-items: center;

    &--max {
        margin-right: 20rpx;
        font-weight: bold;
        color: #fa5555;
    }
}

.goods__text {
    min-height: 100rpx;
    padding: 20rpx 24rpx 100rpx;

    .box {
        height: 60rpx;
    }
}

.shop--content {
    margin-top: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
    font-weight: bold;
    color: #5e5e5e;
}

.shop--english {
    margin-top: 10rpx;
    display: flex;
    justify-content: center;
    align-content: center;
    font-size: 16rpx;
    color: #d1d1d1;
}


.detail__bottom {
    background-color: #fff;
    width: 750rpx;
    height: 100rpx;
    border-top: 1rpx solid #e5e5e5;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: fixed;
    bottom: 0;
}

.downButton {
    width: 86%;
    height: 60rpx;
    border-radius: 50rpx;
    background-color: #fc425a;
}

.detail__img {
    flex: 1;
    width: 68rpx;
    height: 99rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-left: 1rpx solid #e5e5e5;
    color: #1e1c1c;

    &--icon {
        font-size: 20rpx;
    }
}

.detail__img>image {
    width: 68rpx;
    height: 68rpx;
}

.detail__img:nth-child(2) {
    border-left: 1rpx solid #e5e5e5;
}

.noBuy__btn {
    height: 98rpx;
    background-color: #919191;
    text-align: center;
    line-height: 98rpx;
    font-size: 30rpx;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: #fff;
    width: 50%;
}

.buy__btn {
    height: 98rpx;
    background-color: #FE4E63;
    text-align: center;
    line-height: 98rpx;
    font-size: 30rpx;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: #fff;
    width: 60%;
}


.btn {
    padding-left: 30rpx;
    padding-right: 30rpx;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    font-size: 36rpx;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    height: 60rpx;
}

.specific {
    height: 800rpx;
}

.specific__info {
    width: 750rpx;
    height: 200rpx;
    display: flex;
    flex-direction: row;
    padding-left: 30rpx;
    padding-right: 30rpx;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    box-sizing: border-box;

}

.specific__info--image>image {
    width: 260rpx;
    height: 260rpx;
    border: 5rpx solid #fff;
}

.specific__info--product {
    flex: 1;
    margin-left: 30rpx;

    .product__price {
        font-size: 32rpx;
        font-weight: bold;
        color: #fe4e63;
    }

    .product__max {
        font-size: 32rpx;
        color: #fe4e63;
        margin-top: 20rpx;
    }

    .product__price::before {
        content: '￥';
        font-weight: normal;
    }

    .product__stock {
        margin-top: 40rpx;
        height: 30rpx;
        line-height: 30rpx;
        font-size: 30rpx;
    }
}


.miniBottomLog {
    width: 100rpx;
    margin: 0 auto;
    height: 20px;
    display: flex;
    margin-top: 20px;
}
</style>